<template>
  <el-dialog title="图文消息小时报核算" v-model="value" size="full" v-on:close="close" >
    <el-tabs v-model="activeName">
      <el-tab-pane label="图文阅读" name="tw">
        <hour-slider :count="total.tuWenYueDuRenShu" title="图文阅读人数" unit="人"></hour-slider>
        <hour-slider :count="total.tuWenYueDuCiShu" title="图文阅读次数" unit="次"></hour-slider>
      </el-tab-pane>
      <el-tab-pane label="公众号" name="gzh">
        <hour-slider :count="total.gongZhongHaoRenShu" title="公众号阅读人数" unit="人"></hour-slider>
        <hour-slider :count="total.gongZhongHaoCiShu" title="公众号阅读次数" unit="次"></hour-slider>
      </el-tab-pane>
      <el-tab-pane label="朋友圈" name="pyq">
        <hour-slider :count="total.pengYouQuanRenShu" title="朋友圈阅读人数" unit="人"></hour-slider>
        <hour-slider :count="total.pengYouQuanCiShu" title="朋友圈阅读次数" unit="次"></hour-slider>
      </el-tab-pane>
      <el-tab-pane label="分享" name="fx">
        <hour-slider :count="total.fenXiangRenShu" title="分享人数" unit="人"></hour-slider>
        <hour-slider :count="total.fenXiangCiShu" title="分享次数" unit="次"></hour-slider>
      </el-tab-pane>
      <el-tab-pane label="收藏" name="sc">
        <hour-slider :count="total.weiXinShouCangRenShu" title="收藏人数" unit="人"></hour-slider>
        <hour-slider :count="total.weiXinShouCangCiShu" title="收藏次数" unit="次"></hour-slider>
      </el-tab-pane>
      <el-tab-pane label="历史" name="ls">
        <hour-slider :count="total.liShiRenShu" title="历史阅读人数" unit="人"></hour-slider>
        <hour-slider :count="total.liShiCiShu" title="历史阅读次数" unit="次"></hour-slider>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import hourSlider from './tw0002-hour-slider.vue'

  export default {
    props: ['value', 'total'],
    data () {
      return {
        activeName: 'tw'
      }
    },
    computed: {
    },
    watch:{
    }, 
    methods: {
      close () {
        this.$emit('input', false)    //传递弹出窗口的 input 事件，该事件由 v-model 绑定
      }
    },
    components: {
      hourSlider
    }
  }
</script>